{% extends "base.html" %}

{% block title %}首页 - 学生成绩管理系统{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/common.css') }}">
{% endblock %}

{% block content %}
    <div class="home-wrapper">

        <!-- 图表容器 -->
        <div class="charts-container">
            <!-- 成绩分布柱状图 和 班级雷达图 -->
            <div class="chart-row">
                <div class="chart-item">
                    <div class="chart-header">
                        <h3>各科目成绩分布</h3>
                        <p>显示各科目不同分数段的学生人数分布</p>
                    </div>
                    <div id="scoreDistributionChart" class="chart-container"></div>
                </div>
                <div class="chart-item">
                    <div class="chart-header">
                        <h3>班级平均分对比</h3>
                        <p>各班级在不同科目的平均分雷达图对比</p>
                    </div>
                    <div id="classRadarChart" class="chart-container"></div>
                </div>
            </div>

            <!-- 年级趋势图 和 学生排名表 -->
            <div class="chart-row">
                <div class="chart-item">
                    <div class="chart-header">
                        <h3>年级成绩趋势</h3>
                        <p>不同年级各科目平均分趋势对比</p>
                    </div>
                    <div id="gradeTrendChart" class="chart-container"></div>
                </div>
                <div class="chart-item">
                    <div class="chart-header">
                        <h3>学生成绩排名</h3>
                        <p>学生综合成绩排名前50名</p>
                    </div>
                    <div id="studentRankingTable" class="chart-container table-container"></div>
                </div>
            </div>

            <!-- 课程散点图 和 班级饼图 -->
            <div class="chart-row">
                <div class="chart-item">
                    <div class="chart-header">
                        <h3>课程学分与平均分关系</h3>
                        <p>分析课程学分设置与平均分的关系</p>
                    </div>
                    <div id="courseScatterChart" class="chart-container"></div>
                </div>
                <div class="chart-item">
                    <div class="chart-header">
                        <h3>班级人数分布</h3>
                        <p>各班级学生人数占比分布</p>
                    </div>
                    <div id="classPieChart" class="chart-container"></div>
                </div>
            </div>
        </div>

        <!-- 加载提示 -->
        <div id="loadingIndicator" class="loading-indicator">
            <div class="spinner"></div>
            <p>正在加载图表数据...</p>
        </div>
    </div>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="{{ url_for('static', filename='js/charts.js') }}"></script>
{% endblock %}